<!--  -->
<template>
  <div>
    <!-- 模板引用 -->
    <input type="text" ref="inputA" />
    <ul>
      <li v-for="(item, index) in list" :key="index" ref="items">
        {{ item }}
        <learn-slot>{{ item }}</learn-slot>
      </li>
      <li>
        <learn-slot></learn-slot>
      </li>
    </ul>
    <input type="text" :ref="methRef" />
  </div>
  <!-- 插槽使用 -->
  <div>
    <!-- 具名插槽、动态插槽 -->
    <name-slot>
      <template v-slot:header> 头部内容 </template>
      <!-- 写法一： -->
      <!-- <template #default> 主体内容 </template> -->
      <!-- 写法二： -->
      主体内容

      <!-- 动态插槽名 -->
      <template #[slotNameFooter]> 底部内容 </template>
    </name-slot>
    <!-- 作用域插槽 -->
    <scope-slot v-slot="slotProps">
      <span>{{ slotProps.text }}{{ slotProps.count }}</span>
    </scope-slot>
    <!-- 解构写法 -->
    <scope-slot v-slot="{ text, count }"> {{ text }}{{ count }} </scope-slot>
    <name-slot>
      <template #header="headerSlotProps">
        <span> {{ headerSlotProps.text }}{{ headerSlotProps.count }}</span>
      </template>
      <template #default="mainSlotProps">
        <span>{{ mainSlotProps.text }}{{ mainSlotProps.count }}</span>
      </template>
      <template #footer="footerSlotProps">
        <span>{{ footerSlotProps.text }}{{ footerSlotProps.count }}</span>
      </template>
    </name-slot>
  </div>
  <!-- 依赖注入 provide/inject -->
  <div>
    <span>{{ count }}</span>
    <button @click="count++">Add-Count</button>
    <div>子组件展示：</div>
    <provide-inject></provide-inject>
  </div>
</template>

<script>
//组件
import learnSlot from '../../components/slot/learnSlot.vue'
import nameSlot from '../../components/slot/nameSlot.vue'
import scopeSlot from '../../components/slot/scopeSlot.vue'
import provideInject from '../../components/provideInject/index.vue'
//库
import { computed } from 'vue'
//公共方法
import { myInjectionKey } from '../../utils/keys'

export default {
  data() {
    return {
      list: [1, 2, 3, 4],
      slotNameFooter: 'footer',
      count: 0,
      someObject: {},
    }
  },
  components: {
    learnSlot,
    nameSlot,
    scopeSlot,
    provideInject,
  },
  mounted() {
    this.init()
    const newObject = {}
    this.someObject = newObject
    console.log(`对比：${this.someObject == newObject}`)
  },
  methods: {
    /**
     * 模板引用
     */
    init() {
      this.$refs.inputA.focus()
      let items = this.$refs.items
      // console.log(items)
      // console.table(items)
    },
    /**
     * 函数模板
     */
    methRef(el) {
      // console.log(el)
    },
  },
  //对象形式：固定值
  // provide: {
  //   message: 'hello',
  // },

  //函数形式：当前组件实例的状态
  provide() {
    return {
      message: computed(() => this.count),
      defaultMessage: '222',
      [myInjectionKey]: '33333',
    }
  },
}
</script>

<style lang="stylus" scoped></style>
